@function __qribbon-linear-gradient($position)
  @return linear-gradient($position, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%)

@keyframes flow-ltr
  0%
    left: -5%
    opacity: 0
  50%
    left: 50%
    opacity: 0.3
  100%
    left: 100%
    opacity: 0

@keyframes flow-rtl
  0%
    right: -5%
    opacity: 0
  50%
    right: 50%
    opacity: 0.3
  100%
    right: 100%
    opacity: 0

@keyframes flow-ttb
  0%
    top: -5%
    opacity: 0
  50%
    top: 50%
    opacity: 0.3
  100%
    top: 100%
    opacity: 0

@keyframes flow-btt
  0%
    bottom: -5%
    opacity: 0
  50%
    bottom: 50%
    opacity: 0.3
  100%
    bottom: 100%
    opacity: 0

@keyframes flow-corner-tl
  0%
    left: 0%
    bottom: 0%
    opacity: 0
  50%
    left: 50%
    bottom: 50%
    opacity: 0.3
  100%
    left: 100%
    bottom: 100%
    opacity: 0

@keyframes flow-corner-tr
  0%
    right: 0%
    bottom: 0%
    opacity: 0
  50%
    right: 50%
    bottom: 50%
    opacity: 0.3
  100%
    right: 100%
    bottom: 100%
    opacity: 0

@keyframes flow-corner-bl
  0%
    left: 0%
    bottom: 0%
    opacity: 0
  50%
    left: 50%
    bottom: 50%
    opacity: 0.3
  100%
    left: 100%
    bottom: 100%
    opacity: 0

@keyframes flow-corner-br
  0%
    right: 0%
    bottom: 0%
    opacity: 0
  50%
    right: 50%
    bottom: 50%
    opacity: 0.3
  100%
    right: 100%
    bottom: 100%
    opacity: 0

[class^=qribbon__],
[class^=qribbon__]
  .glow
    background: rgb(255, 255, 255)
    width: 40px
    height: 100%
    top: 0
    position: absolute
    animation-name: flow-ltr
    animation-duration: var(--qribbon-glow-speed, 1.5s)
    animation-timing-function: linear
    animation-delay: 0s
    animation-direction: normal
    animation-iteration-count: var(--qribbon-glow-iteration-count, 1.5s)
    animation-fill-mode: forwards
    animation-play-state: running
    background: __qribbon-linear-gradient(to right)

[class^=qribbon__horizontal--right]
  .glow
    animation-name: flow-rtl
    background: __qribbon-linear-gradient(to left)

[class^=qribbon__vertical--top]
  .glow
    width: 100%
    height: 40px
    right: 0
    animation-name: flow-ttb
    transform: skew(0)
    background: __qribbon-linear-gradient(to bottom)

[class^=qribbon__vertical--bottom]
  .glow
    width: 100%
    height: 40px
    right: 0
    bottom: 0
    top: unset
    animation-name: flow-btt
    transform: skew(0)
    background: __qribbon-linear-gradient(to top)

[class^=qribbon__corner--top-left]
  div
    .glow
      height: 100%
      width: 40px
      animation-name: flow-corner-tl
      transform: skew(45deg)
      background: __qribbon-linear-gradient(90deg)

[class^=qribbon__corner--top-right]
  div
    .glow
      height: 100%
      width: 40px
      left: auto
      animation-name: flow-corner-tr
      transform: skew(-45deg)
      background: __qribbon-linear-gradient(-90deg)

[class^=qribbon__corner--bottom-left]
  div
    .glow
      height: 100%
      width: 40px
      animation-name: flow-corner-bl
      transform: skew(-45deg)
      background: __qribbon-linear-gradient(90deg)

[class^=qribbon__corner--bottom-right]
  div
    .glow
      height: 100%
      width: 40px
      animation-name: flow-corner-br
      left: auto
      transform: skew(45deg)
      background: __qribbon-linear-gradient(-90deg)
